<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>A Basic HTML5 Template</title>
    <meta name="description" content="A simple HTML5 Template for new projects.">
    <meta name="author" content="SitePoint">

    <meta property="og:title" content="A Basic HTML5 Template">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
    <meta property="og:description" content="A simple HTML5 Template for new projects.">
    <meta property="og:image" content="image.png">

    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <link rel="stylesheet" href="css/styles.css?v=1.0">

    <!-- <link rel="stylesheet" href="../dist/uPlot.min.css"> -->
    <link rel="stylesheet" href="https://leeoniya.github.io/uPlot/dist/uPlot.min.css">
    <style>
        body {
            margin: 0;
        }

        .u-legend.u-inline .u-value {
            width: 150px;
            text-align: left;
        }
    </style>
</head>

<body>
    <!-- <script src="../dist/uPlot.iife.min.js"></script> -->
    <script src="https://leeoniya.github.io/uPlot/dist/uPlot.iife.min.js"></script>
    <h2 id="wait">Loading lib....</h2>

    <script>
        function round2(val) {
            return Math.round(val * 100) / 100;
        }

        function round3(val) {
            return Math.round(val * 1000) / 1000;
        }

        function prepData(packed) {
            console.time("prep");

            data = [packed["cols"]["timestamp"], packed["cols"]["cpu"]];

            console.timeEnd("prep");

            return data;
        }

        function makeChart(data) {
            console.time("chart");

            const opts = {
                title: "Server Events",
                width: 1000,
                height: 750,
                //	ms:     1,
                //	cursor: {
                //		x: false,
                //		y: false,
                //	},
                series: [
                    {},
                    {
                        label: "CPU",
                        scale: "%",
                        value: (u, v) => v == null ? "-" : v.toFixed(1) + "%",
                        stroke: "red",
                        width: 1 / devicePixelRatio,
                    },
                ],
                axes: [
                    {},
                    {
                        scale: "%",
                        values: (u, vals, space) => vals.map(v => +v.toFixed(1) + "%"),
                    },
                ],
            };

            let uplot = new uPlot(opts, data, document.body);

            Promise.resolve().then(() => {
                wait.textContent = "Done!";
                console.timeEnd("chart");
            });
        }

        let wait = document.getElementById("wait");
        wait.textContent = "Fetching data.json (2.07MB)....";
        fetch("query_cols").then(r => r.json()).then(packed => {
            wait.textContent = "Rendering...";
            let data = prepData(packed);
            setTimeout(() => makeChart(data), 0);
        });
    </script>
</body>

</html>